<template>
    <div :style="{opacity}">
        <custom-nav-bar :text="'美力拾刻活力馆雅颂居二期店'" :bgColor="`rgba(121,102,179,${opacity})`" :frontColor="'#ffffff'" :isFixed="true" />
    </div>
    <div class="g-page-box page-index">
      <view class="header">
        <image class="header-bg" mode="widthFix" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/index_banner2_2x.png"></image>
        <text class="header-title">美力 • 从此刻开始</text>
      </view>

      <view class="g-pl-24 g-pr-24 page-ct">
        <!-- 运动卡片 -->
        <view class="g-mb-36 g-radius-40 g-bg-white g-card-box card1">
          <view class="g-flex-row logo-box" @click="handlerStoreDetail">
            <view class="g-flex-row"> 
              <image v-if="globalStore.storeCover" class="logo-bg" :src="globalStore.storeCover"></image>         
              <image v-else class="logo-bg" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/logo2x.png"></image>
              <text class="g-fs-32 logo-title">{{ globalStore.storeName }}</text>
            </view>
            <image class="logo-order" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/lft_pointer2x.png"></image>
          </view>
          
          <view class="g-flex-row sport-pannel">      
            <!-- 今日运动 -->
            <view class="lft">
              <view class="g-flex-row lft-top">
                <view class="icon-desc"></view>
                <text class="g-fs-28 section-label">今日运动：<text class="g-fs-28 section-value">{{ indexStore.today.sportTime }}</text>分钟</text>
              </view>
              <view class="g-flex-row lft-bottom" style="margin-top:8rpx;">
                <view class="icon-desc"></view>
                <text class="g-fs-28 section-label">运动消耗：<text class="g-fs-28 section-value">{{ indexStore.today.sportKcal }}</text>KCAL</text>
              </view>
            </view>

            <!-- 运动积分 -->
            <view class="rgt">
              <view class="g-flex-row">
                <image class="hand-icon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/hand2x.png"></image>
                <view class="jifen-box">            
                  <view class="g-fs-28 g-fw-b section-label">运动领积分</view>
                  <view class="g-fs-48 f-fw-b section-value" style="margin-top:8rpx;">{{ loginS.userInfo.value?.points||0 }}</view>
                </view>
              </view>
            </view>
          </view>
        
          <view class="g-bg-gray g-flex-row sport-times">      
            <!-- 本周累计运动时长 -->
            <view class="sport-times-box">
              <text class="g-ml-32 section-label">本周累计运动时长：<text class="g-fs-28 section-value">{{ indexStore.today.weekSportTime }}</text>分钟</text>
            </view>

            <!-- 预约课程按钮 -->
            <button v-if="!indexStore.today.sportTime&&!indexStore.today.sportKcal&&!indexStore.bmi.weight" class="order-course" @click="scrollToCourseList">预约课程</button>
            <view v-else-if="indexStore.hasTodayCourseOrder" class="g-mr-32 nosport-box"> 
              <image class="nosport-icon" src="@/static/youke_2x.png"></image>
              <text class="g-fs-28 nosport-label">今日有课别迟到</text>
            </view>
          </view>
        </view>

        <!-- 我的课程预约 -->
        <div class="g-mb-36 course-appointment-box">
          <course-appointment :list="indexStore.orderList" @clickItem="handlerGotoOrderDetail" @clickMore="handlerGotoOrderList" @clickAppointment="scrollToCourseList" />
        </div>

        <!-- 体测卡片 -->
        <view class="g-mb-36 g-radius-40 g-bg-white g-card-box card2" @click="handlerGotoHealthPage">
          <view class="g-flex-row logo-box">
            <view class="g-flex-row">          
              <text class="g-fs-32 g-fw-b logo-title">现在就去做体测</text>
            </view>
            <image class="logo-order" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/lft_pointer2x.png"></image>
          </view>
          <view class="g-flex-row bmi-box">
            <text class="g-fw-b bmi-item bmi-item1">体重{{ indexStore.bmi.weight !=='' ? indexStore.bmi.weight : '?' }}kg</text>
            <text class="g-fw-b bmi-item bmi-item2">体脂率{{ indexStore.bmi.pbf!=='' ? indexStore.bmi.pbf : '?' }}%</text>
            <text class="g-fw-b bmi-item bmi-item3">骨骼率{{ indexStore.bmi.smm !==''? indexStore.bmi.smm : '?' }}kg</text>
          </view>
        </view>

        <!-- 快速导航 -->
        <view class="quick-nav">
          <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="handleGotoNav(item)">
            <image class="nav-icon" :src="item.icon"></image>
            <text class="nav-text">{{ item.text }}</text>
          </view>
        </view>

        <!-- 热门课程 -->
        <view id="hot-course-ref" class="g-flex-row hot-course-titbox">
          <view class="g-fs-36 g-fw-b hot-course-title">热门团课</view>
          <view class="g-fs-24 g-fw-b hot-course-more">会员专享</view>
        </view>
        <view class="g-mb-36 g-radius-40 g-bg-white g-card-box course-list-card">
          <view class="date-query-box">
            <view :class="getDateItemCls(item)" v-for="(item, index) in indexStore.weekList" :key="index" @click="handlerChangeDate(item)">
              <view class="date-query-item-label">
                <text class="nav-text">{{ item.label }}</text>
              </view>
              <view class="date-query-item-date">
                <text class="nav-text">{{ item.date }}</text>
              </view>
            </view>
          </view>
          <view class="course-lists-box">
            <view v-if="indexStore.courseList.length">
              <view class="g-flex-col course-list-item"  v-for="(item, index) in indexStore.courseList" :key="index" @click="handlerGotoCouseDetail(item)">
                  <view class="g-flex-row course-list-item-hd">
                    <view class="g-flex-row course-remaining-box">
                      <view class="split-icon"></view>剩余
                      <text class="g-fw-b remain-count">{{ item.remainingNumber }}</text>
                      位
                    </view>
                    <view>
                      <text class="g-fs-28 g-fw-b course-time">{{ item.courseTimeRange }}</text>
                    </view>
                  </view>
                  <view class="g-flex-row course-list-item-ct">
                    <view class="course-list-item-avatar-box">
                      <image class="course-list-item-avatar" :src="item.courseCover"></image>
                    </view>
                    <view class="course-info-box">
                      <view class="g-fs-32 g-fw-b course-name">{{ item.courseName }}</view>
                      <view class="course-desc">{{ globalStore.getDictItemNameById("sys_course_target",item.trainingTargets) }}</view>
                      <view class="g-flex-row course-name-box">
                        <text class="g-fs-28 g-fw-b course-name">{{ item.coachNames }}</text>
                        <!-- <text class="g-fs-24 course-age">教龄 12年</text> -->
                      </view>
                      <view class="g-flex-row course-order-box">
                        <view class="g-flex-row price-box">
                          <view class="tag1">活动价格</view>
                          <view class="sale-price">¥{{ item.salePrice }}</view>
                          <view class="market-price">¥{{ item.marketPrice }}</view>
                        </view>
                        <view v-if="getIfDisabled(item.status)==='3'" class="g-flex-col order-lj-xufei">
                          <text class="card-guoqi-txt">您的会员已经过期</text>
                          <button class="order-course" @click="handleXufei">立即续费</button>
                        </view>
                        <button v-else-if="getIfDisabled(item.status)==='0'" disabled class="order-course order-course-disabled">{{ item.status==='2'?'已约满':'不可约' }}</button>
                        <button v-else class="order-course" @click.stop="handleOrderCourse(item)">预约</button>
                      </view>
                    </view>
                  </view>
              </view>
            </view>
            <view class="g-flex-row nodata" v-else>
              <span class="g-fs-32 g-fw-b g-color-gray">暂无数据</span>
            </view>
          </view>
        </view> 

        <!-- banner1续费 -->
        <!-- <banner>
          <view class="g-flex-row card-overdate">
            <view class="g-flex-row lft">
              <image class="nosport-icon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/banner001_2x.png"></image>
              <text>您的会员还剩 2 天过期</text>
            </view>
            <view class="rgt">续费</view>
          </view>
        </banner> -->

        <!-- banner2 立即预约体验课 -->
        <!-- <banner>
          <view class="g-flex-row card-oder-banner">
            <image class="tiyanjuan-icon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/banner001_2x.png"></image>
            <view class="ct">
              <text><text class="gray">您有</text> 1 <text class="gray">张免费体验卷</text> 倒计时 3 天</text>
              <view class="order-btn">立即预约体验课</view>
            </view>
          </view>
        </banner> -->

        <!-- banner 环操课体验卷 悬浮 关闭 -->
        <banner v-if="huanCaoKeShow" customClass="card-float-box" :showClose="true" :animate="false" @closePopup="handlerHuanCaoKeClose">
          <view class="g-flex-row card-float-box-inner huancaoke-box-inner"  @click="handlerOrderHuanCaoKe">
            <image class="nosport-icon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/huancao_tyj_2x.png"></image>
            <view class="ct">
              <text><text class="gray">您有</text> <text class="g-fs-32">1</text> <text class="gray">张免费体验卷</text> 倒计时 {{ tiyankaDay }} 天</text>
              <view class="g-flex-row">
                <button class="order-btn">立即预约体验课</button>
                <image class="xiaogu-icon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/xiaogu.png"></image>
              </view>
            </view>
            <view class="beam-box">
              <view class="beam0"></view>
              <view class="beam1"></view>
            </view>
          </view>
        </banner>

        <!-- banner 会员卡 过期 悬浮 关闭 -->
        <banner v-if="cardGuoQiShow" customClass="card-float-box" :showClose="true" :animate="false" @closePopup="handlerGuoQiClose">
          <view class="g-flex-row card-float-box-inner" @click="handlerGuoQiAndOrderCard">
            <view class="g-flex-row lft">
              <image class="nosport-icon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/cardicon_4x.png"></image>
              <view class="g-flex-col lft-ct">
                <text class="g-fs-32">您的会员已过期</text>
                <text class="g-fs-24 g-color-gray">Keep exercising</text>
              </view>
            </view>
            <view class="rgt">
              <button class="g-fs-28 goto-card">购买会员</button>
            </view>
            <view class="beam-box">
              <view class="beam0"></view>
              <view class="beam1"></view>
            </view>
          </view>
        </banner>

        <!-- banner 会员5天内到期，展示次卡 关闭 -->
        <banner v-if="cardXufeiShow" customClass="card-float-box" :showClose="true" :animate="false" @closePopup="handlerXuFeiClose">
          <view class="g-flex-row card-float-box-inner xufei-box-innner" @click="handlerCardXufei">
            <view class="g-flex-row lft">
              <image class="nosport-icon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/banner001_2x.png"></image>
              <view class="g-flex-col lft-ct">
                <text class="g-fs-28 tit1">您的会员还剩 <text class="g-fs-32">{{ cardDateDiff }}</text> 天过期</text>
                <text v-if="cardCount" class="g-fs-28">您的次卡还剩 <text class="g-fs-32">{{ cardCount }}</text> 次</text>
              </view>
            </view>
            <view class="rgt">
              <button class="g-fs-28 goto-card">续费</button>
            </view>
            <view class="beam-box">
              <view class="beam0"></view>
              <view class="beam1"></view>
            </view>
          </view>
        </banner>

        <!-- 最近的课程预约 -->
        <!-- <view class="g-mb-36 g-radius-40 g-bg-white g-card-box course-list-card">
          <view class="g-flex-row card-title-box">
            <view class="g-fs-32 g-fw-b course-title">最近的课程预约</view>
            <view class="g-fs-28 g-fw-b course-more">
              <view class="g-flex-row more">
                <image class="flush-icon" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/flush_2x.png"></image>
                查看全部
              </view>
            </view>
          </view>
          <view class="course-lists-box">
            <view class="g-flex-col course-list-item">
                <view class="g-flex-row course-list-item-hd">
                  <view class="g-flex-row course-date">
                    上课时间: 2025.01.15 (周三)
                  </view>
                  <view>
                    <text class="g-fs-28 course-time">10:00 - 12:00</text>
                  </view>
                </view>
                <view class="g-flex-row course-list-item-ct">
                  <view class="course-list-item-avatar-box">
                    <image class="course-list-item-avatar" src="https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/logo.png"></image>
                  </view>
                  <view class="course-info-box">
                    <view class="g-fs-32 g-fw-b course-name">CorsScaler腰腹塑形美力自研</view>
                    <view class="course-desc">擅长肩周炎、颈椎病改善</view>
                    <view class="g-flex-row course-name-box">
                      <text class="g-fs-28 g-fw-b course-name">张教练</text>
                      <text class="g-fs-24 course-age">教龄 12年</text>
                    </view>
                  </view>
                </view>
            </view>
          </view>
        </view> -->

        <!-- 学员风采 -->
        <!-- <view class="card-list-box">
          <view class="card-list-title">学员风采</view>
          <view class="card-list-ct">
            <view class="card-list-item" v-for="(item, index) in demoList" :key="index">
              <view class="card-list-icon-box">
                <image class="card-list-icon" :src="item.icon"></image>
              </view>
            </view>
          </view>
        </view> -->

        <!--营养健康咨询 -->
        <!-- <view class="card-list-box">
          <view class="card-list-title">营养健康咨询</view>
          <view class="card-list-ct">
            <view class="card-list-item" v-for="(item, index) in demoList" :key="index">
              <view class="card-list-icon-box">
                <image class="card-list-icon" :src="item.icon"></image>
              </view>
            </view>
          </view>
        </view> -->

        <!--热门干货 -->
        <!-- <view class="card-list-box">
          <view class="card-list-title">热门干货</view>
          <view class="card-list-ct">
            <view class="card-list-item" v-for="(item, index) in demoList" :key="index">
              <view class="card-list-icon-box">
                <image class="card-list-icon" :src="item.icon"></image>
              </view>
            </view>
          </view>
        </view> -->
      </view>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useIndexStore } from '@/store/index';
import { useGlobalStore } from "@/store/gobal";
import useLogin from "@/functions/useLogin";
import { onShow, onPageScroll } from "@dcloudio/uni-app";
import setTab from '@/functions/useSetTab';
import dayjs from 'dayjs';
import { GUO_QI_DAY } from '@/config/index';


const indexStore = useIndexStore();
const loginS = useLogin();
const globalStore = useGlobalStore();
const storeInfo = ref({});
console.log("@@@@@@@");

console.log(globalStore.storeName);


// 会员卡过期展示
const cardGuoQiShow = ref(false);
// 会员卡即将到期展示
const cardXufeiShow = ref(false);
const cardDateDiff = ref(0);
// 次卡剩余次数
const cardCount = ref(0);

// 环操课体验卷展示
const huanCaoKeShow = ref(false);
const tiyankaDay = ref(0);

console.log(useLogin().userInfo);

const navList = ref([
    { icon: 'https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/navicon/1_2x.png', text: '课程预约',val:'online-order' },
    { icon: 'https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/navicon/2_2x.png', text: '线上课程',val:'online-course' },
    { icon: 'https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/navicon/3_2x.png', text: '运动数据',val:'sport-data' },
    { icon: 'https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/navicon/4_2x.png', text: '健康数据',val:'health-data' },
    { icon: 'https://andy-res.oss-cn-chengdu.aliyuncs.com/meyka-miniapp/static/navicon/5_2x.png', text: '会员卡',val:'card-list' }
]);

// 滚动事件 接入自定义头部导航
const opacity = ref(0);
const scrollTop = ref(0);
onPageScroll(data => {
    // 保存scrollTop值，用于后续计算滚动距离
    scrollTop.value = data.scrollTop || 0;
    
    if (data.scrollTop < 50) {
      opacity.value = 0;
    }else if (data.scrollTop >= 50 && data.scrollTop <= 100) {
      opacity.value = (data.scrollTop - 50) / 50;
    }else if(data.scrollTop > 100) {
      opacity.value = 1;
    }
})

const getDateItemCls = (item) => {
  return item.disabled ? 'date-query-item date-query-box-disable' : item.active ? 'date-query-item date-query-item-active' : 'date-query-item';
}

const handlerStoreDetail = () => {
  console.log('去门店详情')
  uni.navigateTo({
    url: '/pages/store/index',
  })
}

const scrollToCourseList = () => {
  uni.createSelectorQuery()
    .select('#hot-course-ref')
    .boundingClientRect(rect => {
      if (rect) {
        // rect.top 是元素相对于其包含块的顶部距离
        // 在uni-app中，通常这个包含块是页面本身，但如果有滚动容器，则需要额外计算
        console.log('元素到文档顶点的距离（可能需要调整）:', rect.top);

        // 如果页面有滚动，并且元素不在页面顶部，则需要加上页面的滚动偏移量
        // 可以通过 uni.getSystemInfoSync().windowHeight 和页面滚动事件来获取滚动偏移量
        // 这里假设我们已经有了一个 scrollTop 的变量来表示页面滚动偏移量
        const distanceToTop = rect.top + scrollTop.value;
        console.log('元素到文档实际顶点的距离:', distanceToTop);
        uni.pageScrollTo({ // 执行页面滚动操作
          scrollTop: distanceToTop - 60, // 滚动到该元素顶部，减去60的偏移量
          duration: 300 // 滚动动画时间（毫秒）
        });
      }
    })
    .exec();
}

const handleOrderCourse = (item) => {
  console.log('预约课程', item);
  //todo:要根据状态判断跳转到卡列表或者课程详情页
  uni.navigateTo({
    url: '/pages/course/index?unicode='+item.courseUniqueCode+'&type=order',
  });
}

const handlerGotoCouseDetail = (item) => {
  console.log('去课程详情', item);
  uni.navigateTo({
    url: '/pages/course/index?unicode='+item.courseUniqueCode,
  });
}

const handlerGotoHealthPage = () => {
  console.log('去测试')
  // 切换sport页面
  uni.switchTab({
    url: '/pages/health/index',
  });
}

const handlerGotoSportPage = () => {
  // 切换sport页面
  uni.switchTab({
    url: '/pages/sport/index',
  });
}

const handlerGotoCardListPage = () => {
  // 切换sport页面
  uni.navigateTo({
    url: '/pages/card/index',
  });
}

const handleGotoNav = (item) => {
  console.log('去导航', item);
  switch (item.val) {
    case 'online-order':
      scrollToCourseList()
      break;
    case 'online-course':
      console.log('去线上课程');
      handlerGotoOnlineCourse()
      break;
    case 'sport-data':
      handlerGotoSportPage()
      break;
    case 'health-data':
      handlerGotoHealthPage()
      break;
    case 'card-list':
      handlerGotoCardListPage()
      break;
  }
}

const handlerGotoOnlineCourse = () => {
	uni.openChannelsUserProfile({
		finderUserName: 'sphwGAsA42wH0ew',
	})
}

const handleXufei = () => {
  uni.navigateTo({
    url: '/pages/card/index',
  });
}

// 关闭过期弹层
const handlerClose = () => {
  console.log('关闭过期弹层')
  floatBannerShow.value = false;
}

// 过期，购买会员卡
const handlerGuoQiClose = () => {
  console.log('关闭过期弹层')
  cardGuoQiShow.value = false;
  // 保存用户关闭标志
  uni.setStorageSync('floatBannerShow', new Date().getDate());
}
const handlerGuoQiAndOrderCard = () => {
  console.log('过期，购买会员卡')
  cardGuoQiShow.value = false;
  handlerGotoCardListPage()
}
// 预约环操课
const handlerHuanCaoKeClose = () => {
  console.log('关闭环操课弹层')
  huanCaoKeShow.value = false;
  // 保存用户关闭标志
  uni.setStorageSync('floatBannerShow', new Date().getDate());
}
const  handlerOrderHuanCaoKe = () => {
  console.log('预约环操课')
  huanCaoKeShow.value = false;
  // todo 预约环操课逻辑
}
// 会员卡续费
const handlerXuFeiClose = () => {
  console.log('关闭续费弹层')
  cardXufeiShow.value = false;
  // 保存用户关闭标志
  uni.setStorageSync('floatBannerShow', new Date().getDate());
}
const handlerCardXufei = () => {
  console.log('会员卡续费')
  cardXufeiShow.value = false;
  handlerGotoCardListPage()
}

const handlerChangeDate = (item) => {
  if (item.disabled) return;
  console.log('选择日期', item.value);
  indexStore.resetWeekListActive(item.value);
  indexStore.courseList = [...(item.courses || [])];

  // 一天之内保存上次操作的日期
  uni.setStorageSync('selecedDate', {
    date: item.value,
    saveFlag: new Date().getDate(),
  });
}

const handlerGotoOrderDetail = (item) => {
  // console.log('去订单详情', item);
}

const handlerGotoOrderList = (e) => {
  console.log('去课程预约列表')
  uni.navigateTo({
    url: '/pages/my/courseorder/index',
  });
}

/**
 * 判断日期是否已过期
 * @param date 目标日期（格式：YYYY-MM-DD）
 * @returns 是否过期（true/false）
 */
 const isOverdue = (date) => {
  const now = dayjs(); // 当前时间
  const expireTime = dayjs(date).endOf('day'); // 目标日期的 23:59:59
  return expireTime.diff(now, 'day') <= GUO_QI_DAY;
};

/**
 * 计算两个日期相差的天数
 * @param date 目标日期（格式：YYYY-MM-DD）
 * @returns 相差的天数
 */
const getDayDiff = (date) => {
  const today = dayjs().startOf('day'); // 获取当天的 00:00:00
  const targetDate = dayjs(date).startOf('day'); // 目标日期的 00:00:00
  const diffDayCount = targetDate.diff(today, 'day');
  return diffDayCount < 0 ? 0 : diffDayCount;
};

const getLocationInfo = () => {
  uni.authorize({
    scope: 'scope.userFuzzyLocation',
    success: () => {
      // 用户已经同意小程序使用位置功能
      uni.getFuzzyLocation({
          type: 'wgs84', // 返回可以用于wx.openLocation的经纬度
          success: (res) => {
              const latitude = res.latitude; // 纬度
              const longitude = res.longitude; // 经度
              console.log('当前位置的纬度：', latitude, '经度：', longitude);
              // 可以在这里进行后续操作，如地图显示等
              globalStore.setLocation(latitude, longitude);
          },
          fail: (error) => {
              console.error('获取位置失败', error);
          }
      });
    },
    fail: () => {
      // 用户拒绝授权，或者系统不支持授权，可以引导用户到设置页面进行授权
      uni.showModal({
          title: '权限提示', // 弹窗标题
          content: '需要获取您的位置信息才能为您推荐最近的门店，请前往设置开启权限', // 弹窗内容
          success: (res) => {
            // 弹窗关闭后的回调
            if (res.confirm) {
              // 如果用户点击了“确定”按钮
              uni.openSetting(); // 打开设置页面，让用户手动开启权限
            }
          }
        });
    }
  });
}

// 根据status状态填写状态
// getIfDisabled=='',可预约；（1可预约  ）
// getIfDisabled=='0',不可预约；(不可约，2已约满 ， 6会员卡还未激活，无法预约， 7无需预约 8不支持在线预约9，课程预约过期)
// getIfDisabled=='3'，续费或者购买会员卡（3 需购买活力会员卡 4需续费活力会员卡，再购买团课次卡， 5需购买团课次卡）
// 重新定义状态orderStatus 0 不可预约，1可预约，3 需购买会员卡或续费
const getIfDisabled = (status) => {
    if (status === '1') { 
      return '';
    }else if (status === '9' || status === '8' || status === '7' || status === '6') {
      return '0';
    } else {
      return '3';
    }
}


onShow(async () => {
  // 判断登录，并不会自动跳转
  console.log("#######");
  console.log(globalStore.storeName);
  getLocationInfo();
  const flag = await loginS.checkLogin(true);
  console.log('checkLogin', flag);
  setTab(0);
  console.log('userInfo', loginS?.userInfo);
  const todayStr = dayjs().format('YYYY-MM-DD');
  indexStore.init(globalStore.storeCode, flag,loginS.userInfo.value?.userId,todayStr);

  if (flag) {
      // 判断弹出广告之前，验证1天之内用户是否曾经关闭过，如果关闭过，则不出，框架uiapp
      const isClose = uni.getStorageSync('floatBannerShow') || 0;
      if (new Date().getDate() === isClose ) {
        return;
      }
      // 判断是否出弹层
      if (loginS.userInfo.value?.memberCard && loginS.userInfo.value?.memberCard.status === '2') {
        // 先判断会员是否过期，过期了就弹出弹层
        cardGuoQiShow.value = true;
        cardXufeiShow.value = false;
        huanCaoKeShow.value = false;
      } else if (loginS.userInfo.value?.memberCard && loginS.userInfo.value?.memberCard.status === '1' && isOverdue(loginS.userInfo.value?.memberCard.expirationDate)) {
        // 会员卡即将过期，弹出续费弹层
        cardGuoQiShow.value = false;
        cardXufeiShow.value = true;
        huanCaoKeShow.value = false;

        cardDateDiff.value = getDayDiff(loginS.userInfo.value?.memberCard.expirationDate);
        cardCount.value = loginS.userInfo.value?.timeCard?.remainingSessions || 0;
      } else if (loginS.userInfo.value?.memberCard &&
        (loginS.userInfo.value?.memberCard.status === '0' || loginS.userInfo.value?.memberCard.status === '3') &&
        loginS.userInfo.value?.trialCard &&
        loginS.userInfo.value?.trialCard.expirationDate) { 
          // 会员卡未激活，弹出环操课弹层
          cardGuoQiShow.value = false;
          cardXufeiShow.value = false;
          huanCaoKeShow.value = true;

          tiyankaDay.value = getDayDiff(loginS.userInfo.value?.trialCard.expirationDate) || 0;
      }
  }
})
</script>

<style  scoped lang="scss">
.page-index{
  padding-bottom: 158rpx;
  .header{
    position: relative;
    z-index: 0;
    &-bg{
      width: 100%;
    }
    &-title{
      font-weight: 600;
      font-size: 36rpx;
      position: absolute;
      top:385rpx;
      left: 48rpx;
      color:$uni-bg-color;
    }
  }
  .page-ct{
    position: relative;
    margin-top:-80rpx;
    z-index: 5;
    .card1{
      padding:0rpx;
      .logo-box{
        justify-content: space-between;
        padding-top:24rpx;
        padding-left:20rpx;
        padding-right:20rpx;
        .logo-bg{
          width: 76rpx;
          height: 76rpx;
          border-radius: 50%;
          overflow: hidden;
        }
        .logo-title{
          margin-left:16rpx;
          color:#333;
        }
        .logo-order{
          width: 48rpx;
          height: 48rpx;
        }
      }
      .sport-pannel{
        padding:30rpx 20rpx;
        .lft{
          flex: 1 1 0%;
          line-height: 40rpx;
          border-right:1px dashed #E5E5E5;
          .icon-desc{
            width: 10rpx;
            height: 10rpx;
            border-radius: 5rpx;
            background: #7966B3;
            margin-right:14rpx;
          }
          color:#999;
          .section-value{
            color:#333;
            padding-right:8rpx;
          }
        }
        .rgt{
          flex: 1 1 0%;
          .jifen-box{
            padding-left:20rpx;
          }
          .hand-icon{
            width: 92rpx;
            height: 108rpx;
            margin-left:40rpx;
          }
        }
      }
      .sport-times{
        border-radius: 0rpx 0rpx 40rpx 40rpx;
        justify-content: space-between;
        padding-top:20rpx;
        padding-bottom:20rpx;
        .section-value{
          color:#333;
          padding-right:8rpx;
        }
        .order-course{
          margin:0rpx;
          margin-right:20rpx;
          width: 220rpx;
          height: 72rpx;
          line-height: 72rpx;
          background: #7966B3;
          border-radius: 12rpx 12rpx 28rpx 12rpx;
          font-size:32rpx;
          color:#fff;
        }
        .nosport-box{
          display: flex;
          justify-content: center;
          .nosport-icon{
            width: 40rpx;
            height: 40rpx;
            margin-right:5rpx;
          }
        }
      }
    }
    .course-appointment-box{
      box-sizing: border-box;
    }
    .card2{
      .logo-box{
        justify-content: space-between;
        .logo-bg{
          width: 76rpx;
          height: 76rpx;
        }
        .logo-title{
          margin-left:16rpx;
          color:#333;
        }
        .logo-order{
          width: 48rpx;
          height: 48rpx;
        }
      }
      .bmi-box{
        line-height: 40rpx;
        margin-top:18rpx;
        .bmi-item{
          flex: 1 1 0%;
          padding-left:32rpx;
        }
      }
    }

    .quick-nav {
      display: flex;
      justify-content: space-between; // 图标均匀分布
      flex-wrap: wrap; // 超出自动换行
      padding-top:0rpx;
      padding-bottom:12rpx;
      .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%; // 每个图标占一行 20% 的宽度
        line-height: 36rpx;
        .nav-icon {
          width:130rpx;
          height:130rpx;
        }
        .nav-text {
          font-size:26rpx;
        }
      }
    }

    .hot-course-titbox{
      padding-top:24rpx;
      padding-bottom:32rpx;
      .hot-course-title{

      }
      .hot-course-more{
        margin-left:16rpx;
        padding:4rpx 18rpx;
        background: linear-gradient( 180deg, #ECD17E 0%, #E2973B 100%);
        border-radius: 22rpx 22rpx 22rpx 0rpx;
        color: #B04309;
        line-height: 34rpx;
      }
    }
    .course-list-card{
      overflow: hidden;
      .date-query-box{
        display: flex;
        justify-content: space-between; // 图标均匀分布
        flex-wrap:nowrap; // 超出自动换行
        .date-query-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          border-radius:50rpx;
          .date-query-item-label{
            padding:22rpx;
            padding-bottom:10rpx;
            font-weight: bold;
          }
          .date-query-item-date{
            padding:22rpx;
            border-radius:28rpx;
            background: rgba(240,242,250,0.4);
            color: #666;
            min-width: 42rpx;
            text-align: center;
          }
        }
        .date-query-item.date-query-box-disable{
          .date-query-item-label{
            color:#D5D5D5;
          }
          .date-query-item-date{
            color:#D5D5D5;
          }
        }
        .date-query-item.date-query-item-active{
          background: rgba(240,242,250,1);
          .date-query-item-label{
            color: #7966B3;
          }
          .date-query-item-date{
            border-radius: inherit;
            background: inherit;
            color: #7966B3;
            font-weight: bold;
          }
        }
      }
      .card-title-box{
        position: relative;
        .course-more{
          position: absolute;
          top:-24rpx;
          right:-20rpx;
          font-size:26rpx;
          width:248rpx;
          height:92rpx;
          border-radius:0rpx 40rpx 0rpx 200rpx;
          background: #7966B3;
          display: flex;
          justify-content: center;
          flex-direction: column;
          text-align: center;
          color:#fff;
          .more{
            margin-left:60rpx;
            .flush-icon{
              margin-right:10rpx;
            }
          }
          .flush-icon{
            position: relative;
            width:32rpx;
            height: 32rpx;
          }
        }
      }
      .course-lists-box{
        .nodata{
          padding:40rpx 20rpx;
          text-align: center;
          justify-content: center;
        }
        .course-list-item{
          padding-top:38rpx;
          padding-bottom:0rpx;
          .course-list-item-hd{
            width:100%;
            display: flex;
            justify-content: space-between; // 图标均匀分布
            padding-bottom:20rpx;
            .course-remaining-box{
              color:#999;
              .split-icon{
                width:6rpx;
                height:16rpx;
                border-radius: 4rpx;
                background:#7966B3;
                margin-right: 12rpx;
              }
              .remain-count{
                color:#333;
              }
            }
          }
          .course-list-item-ct{
            width: 100%;
            align-items: self-start;
            .course-list-item-avatar-box{
              margin-right:28rpx;
              .course-list-item-avatar{
                width: 140rpx;
                height: 140rpx;
                border-radius: 70rpx;
              }
            }
            .course-info-box{
              flex: 1;
              .course-name{
                // 超过隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1; // 显示行数
                -webkit-box-orient: vertical; // 垂直排列
                line-height: 44rpx;
              }
              .course-desc{
                padding:0rpx;
                font-size: 28rpx;
                color: #666666;
                line-height: 34rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1; // 显示行数
                -webkit-box-orient: vertical; // 垂直排列
                margin-top:14rpx;
                margin-bottom:16rpx;
              }
              .course-name-box{
                line-height: 40rpx;
                .course-age{
                  margin-left:26rpx;
                  border-radius: 8rpx;
                  border: 1px solid #CBCBCB;
                  padding:0rpx 5rpx;
                  line-height: 34rpx;
                }
              }
              .course-order-box{
                width:100%;
                justify-content: space-between;
                align-items: baseline;
                padding-top:10rpx;
                padding-bottom: 37rpx;
                border-bottom: 1px solid #D8D8D8;
                .price-box{
                  align-items: center;
                }
                .order-lj-xufei{
                  position: relative;
                  .card-guoqi-txt{
                    display: inline-block;
                    width: 238rpx;
                    height:40rpx;
                    line-height: 40rpx;
                    position: absolute;
                    top:-60rpx;
                    right:0rpx;
                    border-radius: 20rpx;
                    padding:5rpx 0rpx;
                    background-color: rgba(240, 242, 250, 1);
                    text-align: center;
                  }
                }
                .tag1{
                  font-size: 24rpx;
                  background: linear-gradient( 180deg, #ECD17E 0%, #E2973B 100%);
                  border-radius: 10rpx;
                  border-top-right-radius: 20rpx;
                  padding-left:10rpx;
                  padding-right:10rpx;
                  color:#B04309;
                  height:40rpx;
                  line-height:40rpx;
                }
                .sale-price{
                  color: #7966B3;
                  font-size: 44rpx;
                  font-weight: bold;
                  margin-left:12rpx;
                  margin-right:12rpx;
                }
                .market-price{
                  text-decoration: line-through;
                  color:#999;
                  font-size: 24rpx;
                  padding-top:10rpx;
                }
                .order-course{
                  margin:0;
                  padding:0;
                  line-height: 56rpx;
                  width:120rpx;
                  height: 56rpx;
                  border-radius: 12rpx;
                  background: #7966B3;
                  font-size:28rpx;
                  color:#fff;
                }
                .order-course.order-course-disabled{
                  background: #EFEEEE;
                  color:#C6C6C6;
                }
              }
            }
          }
        }
      }
    }

    // 悬浮按钮
    .card-float-box-inner{
      justify-content: space-between;
      color:#fff;
      background-color: #7966B3;
      padding-top:24rpx;
      padding-bottom:24rpx;
      border-radius: 40rpx;
      padding-left:36rpx;
      padding-right:36rpx;
      overflow: hidden;
      position: relative;
      .lft{
        image{
          width: 134rpx;
          height: 78rpx;
          margin-right: 12rpx;
        }
        .lft-ct{
          align-items: self-start;
          line-height: 48rpx;
        }
      }
      .rgt{
        .goto-card{
          padding: 0rpx;
          margin:0rpx;
          background: #5D4B92;
          padding-left:44rpx;
          padding-right:44rpx;
          height:72rpx;
          border-radius: 12rpx;
          color:#fff;
          text-align: center;
          line-height:72rpx;
          font-weight: bold;
        }
      }
      .beam-box {
          display: flex;
          position: absolute;
          top: -50%; /* 从左下角开始 */
          left: -100%;
          height: 200%; /* 足够高度以覆盖区域 */
          transform: rotate(45deg); /* 光束方向为右上角到左下角 */
          
          .beam0 {
            height: 100%;
            width: 20rpx; /* 光带宽度固定为 20rpx */
            background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
          }
          
          .beam1 {
            margin-left: 10rpx;
            height: 100%;
            width: 10rpx; /* 光带宽度固定为 10rpx */
            background: linear-gradient(45deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
          }

          animation: beam-animation 2s infinite; /* 动画从左到右 */
      }

      @keyframes beam-animation {
          0% {
            top: -50%; /* 从左下角开始 */
            left: -100%; /* 左边 */
          }
          100% {
            top: -50%; /* 移动到右上角 */
            left: 100%; /* 到右边结束 */
          }
      }
    }
    .huancaoke-box-inner{
      justify-content: left;
      .nosport-icon{
        width:194rpx;
        height:152rpx;
        position: relative;
        left:-36rpx;
        bottom:-24rpx;
      }
      .ct{
        padding-left:18rpx;
        position: relative;
        left: -36rpx;
        .gray{
          color: rgba(255,255,255,0.6);
        }
        .order-btn{
          padding: 0rpx;
          margin:0rpx;
          font-weight: bold;
          padding-left:44rpx;
          padding-right:44rpx;
          height:52rpx;
          border-radius: 26rpx;
          background: #5D4B92;
          display: flex;
          justify-content: center; // 图标均匀分布
          line-height: 52rpx;
          margin-top:10rpx;
          font-size: 28rpx;
          font-weight: bold;
          color:#fff;
        }
        .xiaogu-icon{
          width:43rpx;
          height:39rpx;
          position: relative;
          margin-left:16rpx;
          top:2rpx;
        }
      }
    }

    .xufei-box-innner{
      .lft{
        image{
          width:114rpx;
          height:88rpx;
          margin-right: 12rpx;
        }
      }
      .tit1{
        padding-bottom:2rpx;
        border-bottom: 1px dashed #999;
      }
    }
    
    .card-overdate{
      justify-content: space-between;
      color:#fff;
      .lft{
        image{
          width: 114rpx;
          height: 88rpx;
          margin-right: 12rpx;
        }
      }
      .rgt{
        background: #5D4B92;
        width:156rpx;
        height:72rpx;
        border-radius: 12rpx;
        color:#fff;
        text-align: center;
        line-height:72rpx;
        font-weight: bold;
      }
    }

    .card-oder-banner{
      color:#fff;
      .tiyanjuan-icon{
        width: 194rpx;
        height: 152rpx;
      }
      .ct{
        padding-left:18rpx;
        .gray{
          color: rgba(255,255,255,0.6);
        }
        .order-btn{
          font-weight: bold;
          width:338rpx;
          height:52rpx;
          border-radius: 26rpx;
          background: #5D4B92;
          display: flex;
          justify-content: center; // 图标均匀分布
          line-height: 52rpx;
          margin-top:10rpx;
        }
      }
    }

    .card-list-box{
      .card-list-title{
        line-height: 50rpx;
        font-size: 36rpx;
        font-weight: bold;
      }
      .card-list-ct{
        display: flex;
        justify-content: space-between; // 图标均匀分布
        flex-wrap: wrap; // 超出自动换行
        margin-top:24rpx;
        margin-bottom:24rpx;
        .card-list-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom:24rpx;
          .card-list-icon-box{
            display: flex;
            flex-direction: column;
            align-items: center;
            width:340rpx;
            height:196rpx;
            border-radius: 16rpx;
            overflow: hidden;
            background: #E7EAED;
            .card-list-icon {
              width:340rpx;
            }
          }
        }
      }
    }
  }
}
</style>
